<template>
  <div>
    <el-upload :file-list="fileList" action="" :http-request="upload" list-type="picture-card" :auto-upload="false" 
    :before-upload="beforeUpload">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file ,fileList}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="beforeRemove(file,fileList)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>

    <div v-if="url" class="custom-image-preview" @click="closePreview">
      <img :src="url" alt="Preview" />
    </div>
  </div>
</template>

<script>
import store from "@/store";
import {upload} from '@/api/common'
export default {
  data() {
    return {
      disabled: false,
      fileList:[],
      url: "",
      customHeaders: { // 添加自定义请求头
        'Authorization': `Bearer ${store.getters.token}`
      }
    };
  },
  created(){
  },
  methods: {
    beforeUpload(file){
      const isLt2M = file.size / 1024 / 1024 < 0.1;
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过2MB',
          type: 'warning'
        });
        return false;
      }
    },
    upload(param) {
			const formData = new FormData()
			formData.append('file', param.file)
      upload(formData).then(res => {
        console.log(res);
      })
			// axios.post(process.env.VUE_APP_BASE_API+'/file/upload', formData).then(response => {
			// 	//根据返回值进行判断是否上传成功
			// 	if(response.data.flag){
			// 		//上传成功
			// 		console.log('上传图片成功')
			// 	}else{
			// 		//上传失败
			// 		console.log('图片上传失败')
			// 	}
			// }).catch(response => {
			// 	console.log('异常处理')
			// })
		},
    beforeRemove(file,fileList) {
      console.log(file, fileList,this.fileList);
      // 在这里执行额外的操作，例如弹出确认框
      return new Promise((resolve, reject) => {
        this.$confirm(`确定移除 ${file.name}？`)
          .then(() => {
            // 用户点击了确定，文件将被移除
            resolve(true);
            // 执行其他操作...
            // eslint-disable-next-line vue/no-mutating-props
            this.item.options.defaultValue = fileList;
          })
          .catch(() => {
            // 用户点击了取消，文件将保留
            resolve(false);
          });
      });
    },
    handleRemove(file) {
      console.log(321,file);
    },
    handlePictureCardPreview(file) {
      this.url = file.url;
    },
    handleDownload(file) {
      console.log(file);
    },
    closePreview() {
      this.url = "";
    },
  },
};
</script>

<style scoped>
.custom-image-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.custom-image-preview img {
  max-width: 80%;
  max-height: 80%;
  border: 2px solid #fff;
  cursor: pointer;
}
</style>
